<!DOCTYPT html>

<html>
  <head>
    <title>JavaScript 中获取光标位置</title>
    <style>
      p {
        display: flex;
        flex-direction: row;
      }

      .btn {
        height: 24px;
        margin: 0 10px;
      }

      .edit-div {
        display: inline-block;
        width: 225px;
        border: 1px solid #decdcd;
      }
    </style>
    <script>
      function getCursortPosition(e) {
        // 获取父级元素
        var eleP = e.target.parentNode
        var pos = 0
        if (e.target.nodeName == 'DIV') {
          pos = getDivPosition(e.target)
        } else {
          pos = getPosition(e.target)
        }
        var spanEle = eleP.childNodes[7]
        spanEle.innerText = pos
      }

      // 可编辑div获取坐标
      const getDivPosition = function (element) {
        var caretOffset = 0
        var doc = element.ownerDocument || element.document
        var win = doc.defaultView || doc.parentWindow
        var sel
        // 谷歌、火狐
        if (typeof win.getSelection != 'undefined') {
          sel = win.getSelection()
          // 选中的区域
          if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0)
            // 克隆一个选中区域
            var preCaretRange = range.cloneRange()
            // 设置选中区域的节点内容为当前节点
            preCaretRange.selectNodeContents(element)
            // 重置选中区域的结束位置
            preCaretRange.setEnd(range.endContainer, range.endOffset)
            caretOffset = preCaretRange.toString().length
          }
          // IE
        } else if ((sel = doc.selection) && sel.type != 'Control') {
          var textRange = sel.createRange()
          var preCaretTextRange = doc.body.createTextRange()
          preCaretTextRange.moveToElementText(element)
          preCaretTextRange.setEndPoint('EndToEnd', textRange)
          caretOffset = preCaretTextRange.text.length
        }
        return caretOffset
      }

      // 输入框获取光标
      const getPosition = function (element) {
        let cursorPos = 0
        // IE
        if (document.selection) {
          var selectRange = document.selection.createRange()
          selectRange.moveStart('character', -element.value.length)
          cursorPos = selectRange.text.length
        } else if (element.selectionStart || element.selectionStart == '0') {
          cursorPos = element.selectionStart
        }
        return cursorPos
      }
    </script>
  </head>

  <body>
    <p>
      <label>输入框测试:</label>
      <input type="text" style="width: 220px" onclick="getCursortPosition(event);" />
      <span>光标位置:</span>
      <span></span>
    </p>
    <p>
      <label>文本框测试:</label>
      <textarea rows="5" style="width: 220px" onclick="getCursortPosition(event);"></textarea>
      <span>光标位置:</span>
      <span></span>
    </p>
    <div>
      <label>可编辑div:</label>
      <div contenteditable="true" class="edit-div" onclick="getCursortPosition(event);"></div>
      <span>光标位置:</span>
      <span></span>
    </div>
  </body>
</html>
